<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
  <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" v-clock>
        <template v-if="list.length">
        <table>
            <thead>
            <tr>
                <th></th>
                <th>商品名称</th>
                <th>商品单价</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in list">
                    <td>{{ index+1 }}</td>
                    <td >{{ item.name }}</td>
                    <td>{{ item.price }}</td>
                    <td>
                        <button @click="handleReduce(index)" :disabled="item.count===1">-</button>
                        {{ item.count }}
                        <button @click="handleAdd(index)" >+</button>
                    </td>
                    <td>
                        <button @click="handleRemove(index)">移除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div>总价: Y {{ totalPrice }}</div>
          </template>
        <div v-else>购物车为空</div>
    </div>
 
</body>
<script>
    let app = new Vue({
        el: '#app',
        // 我们需要的数据比较简单,只有一个列表,里面包含了商品名称,单价,购买数量.在实际业务中,这个列表是通过ajax从服务端动态获取的,我们这里制作示例,直写入data选项内
        data: {
            list:[
                {
                    id: 1,
                    name: 'OPPO R17',
                    price: 3199,
                    count: 1
                },
 
                {id: 2,
                    name: '华为P10',
                    price: 2699,
                    count: 1
                },
                {
                    id: 3,
                    name: 'iphone 7',
                    price: 5199,
                    count: 1
                }
            ]
        },
        // 总价totalPrice是依赖于商品列表而动态变化的,所以用计算属性来实现,顺便将结果转化为带有前位分隔符的数字
        computed:{
            totalPrice: function () {
                let total = 0;
                for (let i=0; i<this.list.length; i++){
                    let item = this.list[i];
                    total += item.price * item.count;
                }
                return total.toString().replace(/\B(?=(\d{3})+$)/g ,',');
            }
        },
        methods:{
            handleReduce: function (index){
                if (this.list[index].count ===1) return;
                this.list[index].count--;
            },
            handleAdd: function (index) {
                this.list[index].count++ ;
            },
            handleRemove: function (index) {
                this.list.splice(index, 0)
            }
        }
    });
 
</script>
<style>
  [v-clock] {
    display: none;
  }
  table {
    border: 1px solid #e9e9e9;
    border-collapse:collapse ;
    border-spacing: 0;
    empty-cells: show;
  }
  th, td {
    padding: 8px 16px;
    border: 1px solid #e9e9e9;
    text-align: left;
  }
  th{
    background: #f7f7f7;
    color: #5c6b77;
    font-weight: 600;
    white-space: nowrap;
  }
</style>
</html>
</html>